<template>
    <div>
        <div class="bg">
            <img :src="detail.coverImgUrl" alt />
        </div>
        <div class="desc">
            <div class="desc-img"><img :src="detail.coverImgUrl" alt /></div>
            <div class="desc-img">{{ detail.name }}</div>
        </div>

        <div>
            <Music :list="songs" />
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            detail: {},
            songs: []
        };
    },
    created() {
        //截取歌单id
        let ids = this.$route.query.id
        console.log("截取的id", ids)
        this.getDetail(ids)
    },
    methods: {
        //获取歌单详情
        getsongDetail(ids) {
            this.axios({
                method: "get",
                url: "https://apis.netstart.cn/music/song/detail",
                params: {
                     ids
                }
            }).then((res) => {
                console.log(res);
                this.songs = res.data.songs;
            })
        },
        getDetail(id) {
            this.axios({
                method: "get",
                url: "https://apis.netstart.cn/music/playlist/detail",
                params: {
                    id
                }
            }).then(res => {
                console.log(res);
                //存放歌单里面全部歌曲的id
                let arr = []
                res.data.playlist.tracks.forEach((v) => {
                    arr.push(v.id)
                })
                this.getsongDetail(arr.join())
                this.detail = res.data.playlist
            });
        }
    }
};
</script>
<style lang="less" scoped> .desc {
     position: absolute;
     color: #fff;
     top: 0;
     left: 0;
     z-index: 3;
     display: flex;
     width: 100%;
     padding: 10px;
 }

 .bg {
     height: 240px;
     overflow: hidden;

     img {
         width: 100%;
         filter: blur(30px);
     }
 }
 .desc{
    display: flex;
    flex-wrap:nowrap ;
    justify-content: space-around;;
 .desc-img{
    width: 40%;
    top: 55px;
    left: 15px;
    margin-bottom: 20px;
    position: relative;

img {
    width: 90%;
}
}

 }

 .bg:before {
     content: " ";
     width: 100%;
     height: 240px;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
     border-color: #000;
     opacity: 0.3;
 }
</style>
